<template>
	<div class="MapLayerInfo-Nld">
		<div class="point-content">
			<div class="title">
				<div class="text" :title="itemData.name">{{ itemData.name }}</div>
				<div class="status" :class="getStatusClass(itemData.status)">
					{{ itemData.status }}
				</div>
			</div>

			<div class="base-list">
				<div class="base-listDetail">所属区镇：
					<template v-if="itemData.area || itemData.town">
						<div v-if="itemData.area">{{ itemData.area }}</div>
						<div v-if="itemData.town">{{ itemData.town }}</div>
					</template>
					<div v-else>--</div>
				</div>
				<div class="base-listDetail">当前水位：{{ hasValidData(itemData.dataNum) ? itemData.dataNum : '--' }}</div>
				<div class="base-listDetail">数据时间：{{ itemData.dataTime || '--' }}</div>
				<div class="base-listDetail">数据来源：{{ itemData.source || '--' }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import { hasValidData } from 'common/js/utils';
export default {
	props: {
		itemData: {
			type: Object,
			default: () => ({}),
		}
	},
	created () {
		this.hasValidData = hasValidData
	},
	methods: {
		getStatusClass(status) {
			switch (status) {
				case '水位正常':
					return 'status-normal';
				case '水位延迟':
					return 'status-delay';
				case '水位缺失':
				case '水位离线':
					return 'status-missing animated-point';
			}
		}
	}
}
</script>

<style scoped lang="scss">
@import '@/common/scss/color.scss';

.MapLayerInfo-Nld {
	width: 300px;
	.point-content {
		padding: 5px 10px;
		background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
		border-radius: 10px;
		box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
		box-sizing: border-box;
		.title {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: 1px solid $Color-border;
			overflow: hidden;
			.text {
				flex: 1;
				font-size: 16px;
				font-weight: 600;
				color: $Color-text;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.status {
				text-align: center;
				padding: 2px 8px;
				border-radius: 12px;
				font-weight: 500;
				font-size: 12px;
			}
		
			.status-normal {
				flex: 0 0 66px;
				background-color: #e6ffed;
				color: $Color-success;
			}
			
			.status-missing {
				flex: 0 0 66px;
				background-color: #fff1f0;
				color: $Color-danger;
			}
			
			.status-delay {
				flex: 0 0 66px;
				background-color: #fff7e6;
				color: $Color-warning;
			}
		}
	}
	
	.base-list {
		.base-listDetail {
			display: flex;
			margin-bottom: 8px;
			font-size: 14px;
			color: $Color-text-secondary;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			&:first-child {
				color: $Color-text;
				font-weight: 500;
			}
		}
	}
}
</style>